<template>
  <div :class="className" :style="{ height, width }" />
</template>

<script>
var echarts = require('echarts/lib/echarts')
require('echarts/lib/chart/bar')
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/grid')
require('echarts/lib/component/legend')
require('echarts/lib/component/dataZoom')
import resize from './mixins/resize'

const animationDuration = 2000

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '350px'
    },
    // 标题
    title: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 颜色
    color: {
      type: Array,
      default: () => {
        return ['#409eff']
      }
    },
    // 图例
    legend: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 直角坐标系网格
    grid: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 直角坐标系x轴
    xAxis: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 直角坐标系y轴
    yAxis: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 提示框
    tooltip: {
      type: Object,
      default: () => {
        return {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        }
      }
    },
    // 系列名称，用于tooltip显示，legend筛选
    name: {
      type: Array,
      default: () => {
        return []
      }
    },
    // X轴下标数据
    dataX: {
      type: Array,
      default: () => {
        return []
      }
    },
    // Y轴数据
    dataY: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 数据过多是否显示滚动条
    showZoom: {
      type: Boolean,
      default: false
    },
    // 从0开始显示几个柱状图
    endValue: {
      type: Number,
      default: 6 // 从0开始显示7个
    }
  },
  data() {
    return {
      chart: null
    }
  },
  computed: {
    // 滚动条配置
    dataZoom() {
      return [
        {
          show: true,
          height: 20,
          showDetail: false,
          showDataShadow: true,
          borderColor: 'transparent',
          endValue: this.endValue,
          backgroundColor: 'rgba(0,0,0,0)',
          handleSize: '0%',
          handleStyle: {
            color: '#d3dee5'
          }
        }
      ]
    }
  },
  watch: {
    dataX: {
      handler() {
        this.setOptions()
      },
      deep: true
    },
    dataY: {
      handler() {
        this.setOptions()
      },
      deep: true
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    // 释放图表实例
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el)
      this.setOptions()
    },
    setOptions() {
      const chartObj = {}
      const dataLen = this.dataY.length
      chartObj.title = this.title
      chartObj.tooltip = this.tooltip
      chartObj.color = this.color
      chartObj.legend = this.legend
      chartObj.dataZoom = this.showZoom ? this.dataZoom : null
      chartObj.xAxis = []
      chartObj.xAxis = Object.assign({
        type: 'category',
        data: this.dataX,
        ...this.xAxis
      })
      chartObj.yAxis = []
      chartObj.yAxis = Object.assign({
        type: 'value',
        axisLabel: {
          formatter: '{value}'
        },
        data: this.dataY,
        ...this.yAxis
      })
      chartObj.series = []
      for (let i = 0; i < dataLen; i++) {
        if (dataLen === 1) {
          const seriesObj = {
            name: this.name[i],
            type: 'bar',
            data: this.dataY[i]
          }
          seriesObj.itemStyle = {
            normal: {
              color: params => {
                return this.color[params.dataIndex % this.color.length]
              }
            }
          }
          chartObj.series.push({ ...seriesObj, animationDuration })
        } else {
          chartObj.series.push({
            name: this.dataY[i],
            barGap: 0,
            type: 'bar',
            animationDuration,
            data: this.dataY[i]
          })
        }
      }
      this.chart.setOption(chartObj)
    }
  }
}
</script>
